<template>
	<tn-popup v-model="showBox" :maskCloseable="maskCloseable" mode="center" width="80%" :borderRadius="borderRadius">
		<view class="content">
			<tn-list-cell style="background-color: #aaaaaa;">
				<view class="list-icon-text">
					<view class="list__left">
						<view class="list__left__icon tn-icon-image-text-fill"></view>
						<view class="list__left__text">就诊码</view>
					</view>
					<view class="list__right">
						<tn-button @click="colseBox()" class="dawn-btn-sm dawn-btn-sm__defult">
							<text class="tn-icon-close-fill">关闭</text>
						</tn-button>
					</view>
				</view>
			</tn-list-cell>
			<view style="padding-top: 20px;padding-bottom: 20px;background-color: #aaaaaa;color: #626060;">
				<view style="margin-bottom: 50px;" v-if="clinicNo">
					<view class="tn-padding-sm" v-if="showClinicNo">
						<view class="tn-flex tn-flex-row-center">
							<view class="tn-bg-white dawn-radius tn-padding-sm ">
								<w-barcode :options="barcode"></w-barcode>
							</view>
						</view>
					</view>
					<view class="tn-flex tn-flex-row-center tn-flex-col-center ">
						<view>
							<text class="tn-text-lg">门诊号：{{ clinicNo }}</text>
						</view>
						<view @click="colseClinicNo()" class="tn-color-black">
							<text v-if="showClinicNo" class="tn-text-lg tn-icon-eye-close tn-margin-left-ss"></text>
							<text v-else class="tn-text-lg tn-icon-eye tn-margin-left-ss"></text>
						</view>
					</view>
				</view>
				<view class="">	
					<view class="tn-padding-sm" v-if="showPatientId">
						<view class="tn-flex tn-flex-row-center">
							<view class="tn-bg-white dawn-radius tn-padding-sm ">
								<w-qrcode :options="qrcode"></w-qrcode>
							</view>
						</view>
					</view>
					<view class="tn-flex tn-flex-row-center tn-flex-col-center">
						<view>
							<text class="tn-text-lg">病人ID：{{ patientId }}</text>
						</view>
						<view @click="colsePatientId()" class="tn-color-black">
							<text v-if="showPatientId" class="tn-text-lg tn-icon-eye-close tn-margin-left-ss"></text>
							<text v-else class="tn-text-lg tn-icon-eye tn-margin-left-ss"></text>
						</view>
					</view>
					<view class="tn-flex tn-flex-row-center tn-flex-col-center tn-margin-top">
						<view>
							<text class="tn-text-lg">医院就诊时，展码识别身份</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</tn-popup>


</template>

<script>
	import page_mixin from '@/mixins/page_mixin.js'
	import dayjs from "@/plugin/dayjs/dayjs.min.js";
	import {
		toLogin
	} from '@/libs/login.js';
	import {
		mapGetters
	} from "vuex";
	const app = getApp();
	export default {
		name: 'patient_box',
		computed: mapGetters(['appConfig', 'uid', 'isLogin', 'userInfo']),
		props: {
			borderRadius: {
				type: [Number, String],
				default: 40
			},
			// 距离右边的距离
			right: {
				type: [Number, String],
				default: 30
			},
			zIndex: {
				type: [Number, String],
				default: 3000
			},
			// patientId
			patientId: {
				type: String,
				default: ''
			},
			// clinicNo
			clinicNo: {
				type: String,
				default: ''
			},
			item: {
				type: Object,
				default: function() {
					return {};
				}
			},
			maskCloseable: {
				type: Boolean,
				default: false
			},
		},
		data() {
			return {
				showBox: true,
				showClinicNo: true,
				showPatientId: true,
				barcode: {
					width: 500, // 宽度 单位rpx
					height: 180, // 高度 单位rpx
					code: '', // 生成条形码的值
				},
				qrcode: {
					code: '', // 生成二维码的值
					size: 460, // 460代表生成的二维码的宽高均为460rpx
				}
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.updateSwiperInfo()
			})
		},
		methods: {
			colseBox() {
				this.showBox = false;
				this.$emit('closeCodeBox', false);
			},
			colseClinicNo() {
				if(this.showClinicNo){
					this.showClinicNo = false;
				}else{
					this.showClinicNo = true;
				}
			},
			colsePatientId() {
				if(this.showPatientId){
					this.showPatientId = false;
				}else{
					this.showPatientId = true;
				}
			},
			// 计算可滑动区域的高度信息
			updateSwiperInfo() {
				const systemInfo = uni.getSystemInfoSync()
				let width = this.pxToRpx(systemInfo.windowWidth) * 0.6;
				// console.table(systemInfo);
				this.qrcode.code = this.patientId;
				// this.qrcode.code = this.clinicNo;
				this.qrcode.size = width - 100;
				this.barcode.width = width;
				this.barcode.code = this.clinicNo;
				this.showCode = true;
			},
			pxToRpx(px){
				let val = px/(uni.upx2px(10)/10);
				console.info(val);
				return val;
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.tn-popup__close--top-right {
		color: #FFFFFF !important;
	}

	.patient-box {
		padding: 10px;
		border-radius: $dawn-btn-radius;
		position: relative;
		// z-index: 1;
		background-color: #fff !important;
		color: #000;
	}

	.patient-head {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 10000;
		background-color: white;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		padding: 10rpx 0rpx;
	}

	.qrcode {
		width: 300rpx;
		height: 300rpx;
		border-radius: $dawn-border-radius;
	}


	::v-deep .tn-list-cell {
		position: relative;
		width: 100%;
		box-sizing: border-box;
		background-color: #FFFFFF;
		color: #080808;
		font-size: $dawn-font-size-base;
		padding: 10rpx 15rpx !important;
	}

	.list-icon-text,
	.list-image-text {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list-image-text {
		.list {
			&__left {
				&__image {
					width: 20rpx;
					height: 20rpx;
				}
			}
		}
	}

	.list {
		font-size: $dawn-font-size-base;

		&__left {
			display: flex;
			align-items: center;
			justify-content: flex-start;

			&__icon,
			&__image {
				margin-right: 8rpx;
				font-size: $dawn-font-size-lg + 2;
				font-weight: bolder;
				color: $dawn-theme-color-dark;
			}

			&__text {
				font-size: $dawn-font-size-lg;
				color: $dawn-theme-color-dark;
				font-weight: bolder;
			}
		}

		&__right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
</style>